<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="m-header">
			<view class="avatar" @click="changeAvatar">
				<u-avatar :src="userInfo.avatar" size="66"></u-avatar>
				<view class="mask">
					<i-icon name="camera-fill" size="18px" color="#fff" @click="changeAvatar"></i-icon>
				</view>
			</view>
			<view class="u-name flex-start" style="position: relative;align-items: center;">
				{{userInfo.username}}
				<view style="position: absolute;right: -140rpx;top: 0;white-space: nowrap;" @click="$util.copyText(userInfo.uid)">
					<text class="badge badge-blue">UID：{{userInfo.uid}}</text>
				</view>
			</view>
		</view>
		
		<view class="m-cell-group">
			<u-cell-group>
				<!-- 昵称 -->
				<u-cell :isLink="true" @click="showModal($t('my_info.username-1'),'username')">
					<text slot="title" class="cell-title">{{$t('my_info.name')}}</text>
					<view slot="value" class="cell-value">
						<text>{{userInfo.username}}</text>
					</view>
					
				</u-cell>
				
				<!-- 性别 -->
				<u-cell :isLink="true"  @click="showSex = true">
					<text slot="title" class="cell-title">{{$t('my_info.sex')}}</text>
					<view slot="value" class="cell-value">
						<text>{{userInfo.sex_text}}</text>
					</view>
				</u-cell>
				<u-action-sheet
					:show="showSex"
					:actions="sexList"
					:title="$t('my_info.sex-select')"
					@close="showSex = false"
					@select="sexSelect"
				>
				</u-action-sheet>
				
				<!-- 生日 -->
				<u-cell :isLink="true"  @click="showBirthday=true">
					<text slot="title" class="cell-title">{{$t('my_info.birthday')}}</text>
					<view slot="value" class="cell-value">
						<text>{{ userInfo.birthday }}</text>
					</view>
				</u-cell>
				<u-datetime-picker
					:show="showBirthday"
					:value="userInfo.birthday"
					mode="date"
					:minDate="-315648000000"
					:maxDate="$util.getTimestamp()"
					@confirm="birthdayConfirm"
					@cancel="showBirthday = false"
					@close="showBirthday = false"
				></u-datetime-picker>
				<u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.superiors-uid')}}</text>
					<view slot="value">
						<view class="cell-value">
							<view v-if="!userInfo.parent_uid">
								<!-- <text class="text">{{$t('my_info.superiors-none')}}</text> -->
								<text class="u-main-color text-danger" @click="bindInviteCodeShow  = !bindInviteCodeShow">绑定</text>
							</view>
							<text v-else>{{ userInfo.parent_uid }}</text>	
						</view>
					</view>
				</u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.reg-time')}}</text>
					<view slot="value" class="cell-value">
						<text>{{userInfo.create_time}}</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="m-cell-group">
			<u-cell-group>
				<u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.realname-1')}}</text>
					<view slot="value">
						<view class="cell-value">
						<text v-if="!userInfo.real_name" class="text-danger" @click="showModal($t('my_info.realname-2'),'real_name',$t('my_info.realname-3'))">{{$t('my_info.click-fill-in')}}</text>
						<text v-if="userInfo.real_name">{{userInfo.real_name}}</text>	
						</view>
					</view>
				</u-cell>
				<!-- <u-cell >
					<text slot="title" class="cell-title">{{$t('my_info.alipay')}}</text>
					<view slot="value">
						<view class="cell-value">
							<text v-if="!userInfo.alipay_acc" class="text-danger" @click="showModal( $t('my_info.alipay-1'),'alipay_acc', $t('my_info.alipay-2'))">{{$t('my_info.click-fill-in')}}</text>
							<text v-if="userInfo.alipay_acc">{{userInfo.alipay_acc}}</text>	
						</view>
					</view>
				</u-cell> -->
				<!-- <u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.wechat')}}</text>
					<view slot="value">
						<view class="cell-value">
							<text v-if="!userInfo.weixin_acc" class="text-danger" @click="showModal( $t('my_info.wechat-1'),'weixin_acc',$t('my_info.wechat-2'))">{{$t('my_info.click-fill-in')}}</text>
							<text v-if="userInfo.weixin_acc">{{userInfo.weixin_acc}}</text>	
						</view>
					</view>
				</u-cell> -->
				<!-- <u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.with-code')}}</text>
					<view slot="value">
						<view class="cell-value" @click="qrcodeModal = true">
							<text v-if="!userInfo.user_money_qr_code" class="text-danger" >{{$t('my_info.upload')}}</text>
							<text v-if="userInfo.user_money_qr_code">{{$t('my_info.upload-success')}}</text>	
						</view>
					</view>
				</u-cell> -->
				<!-- <u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.bind-wx')}}</text>
					<view slot="value">
						<view class="cell-value">
							<text class="text-danger disabled" v-if="!userInfo.openid">{{$t('my_info.bind')}}</text>
							<text v-if="userInfo.openid">{{$t('my_info.bind-success')}}</text>	
						</view>
					</view>
				</u-cell> -->
				
				<u-cell>
					<text slot="title" class="cell-title">{{$t('my_info.bind-phone')}}</text>
					<view slot="value">
						<view class="cell-value">
							<text class="text-danger" v-if="!userInfo.mobile" @click="$util.go('my/bind_phone')">{{$t('my_info.bind')}}</text>
							<text v-if="userInfo.mobile">{{userInfo.mobile}}</text>	
							<text class="text-sm m-l-sm text-danger" v-if="userInfo.mobile" @click="$util.go('my/bind_phone')">{{$t('my_info.edit-title')}}</text>
						</view>
					</view>
				</u-cell>
				<u-cell>
					<text slot="title" class="cell-title">绑定银行卡</text>
					<view slot="value">
						<view class="cell-value">
							<text class="text-danger" v-if="!userInfo.bankname"   @click="$util.go('my/bind_bank')">{{$t('my_info.bind')}}</text>
							<!-- <text v-if="userInfo.mobile">{{userInfo.mobile}}</text>	 -->
							<text class="text-sm m-l-sm text-danger"   @click="$util.go('my/bind_bank')">{{$t('my_info.edit-title')}}</text>
						</view>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view class="m-cell-group" v-if="userInfo.mobile">
			<u-cell-group>
				<u-cell :isLink="true" @click="$util.go('my/cancel')" v-if="configInfo.cancel_account_open == 1">
					<text slot="title" class="cell-title">注销账号</text>
				</u-cell>
				<u-cell :isLink="true" @click="$util.go('my/password')">
					<text slot="title" class="cell-title">{{ !userInfo.password ? $t('my_info.edit-pass') : $t('my_info.set-pass')}}</text>
				</u-cell>
			</u-cell-group>
		</view>
		
		<!-- 绑定邀请码弹窗 -->
		<m-modal
			:show="bindInviteCodeShow"
			:btn="$t('my_info.modal-btn-title')"
			title="绑定推荐人"
			@btnComplete="bindInviteCode"
			@close="bindInviteCodeShow = false"
		>
			<view class="modal-form p-t-md p-b-md m-md">
			<!-- 	<view class="modal-form_hend">
					<image></image>
				</view> -->
				<view class="modal-form_item flex-between">
					<view class="modal-form__inline">
						<input type="text" placeholder="请输入邀请码" v-model="inviteCode" class="input"/>
					</view>
				</view>
			</view>
		</m-modal>
		
		<!-- 通用资料修改弹窗 -->
		<m-modal 
			:show="userInfoModal.show"
			:title="$util.handleStr($t('my_info.modal-title'), userInfoModal.title)"
			:btn="$t('my_info.modal-btn-title')"
			@btnComplete="submitUserInfoModal"
			@close="userInfoModal.show = false"
		>
			<view class="modal-form p-t-md p-b-md m-md">
				<view class="modal-form_item flex-between">
					<view class="modal-form__inline">
						
						<input type="text" :placeholder="$util.handleStr($t('my_info.modal-input-placeholder'), userInfoModal.title)" v-model="userInfoModal.value" class="input"/>
					</view>
				</view>
				<view class="modal-form_tips text-xs" v-if="userInfoModal.tips">
					{{ userInfoModal.tips }}
				</view>
			</view>
		</m-modal>
		
		
		<m-modal
			:show="qrcodeModal" 
			:title="$t('my_info.edit-withcode-modal-title')"
			@close="qrcodeModal = false"
		>
			<view class="slot-content p-t-md p-b-md">
				<view class="modal-upload" @click="changeQrcode">
					<!-- 预览图 -->
					<view class="modal-upload_prview" v-if="userInfo.user_money_qr_code">
						<image :src="userInfo.user_money_qr_code" mode="widthFix" style="width: 100%;"></image>
					</view>
					<!-- 上传区块 -->
					<view class="modal-upload_camera" v-if="!userInfo.user_money_qr_code">
						<i-icon name="image-add-line" size="60rpx" color="#888"></i-icon>
						<view class="m-uploads___title">
							<text>{{$t('my_info.edit-withcode-modal-btn')}}</text>
						</view>
					</view>
				</view>
				<!-- <text>上传成功后则无</text> -->
			</view>
		</m-modal>
	
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		
		<side-tools :scrollTop="scrollTop"></side-tools>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				userInfoModal:{
					show:false,
					title:'',
					tips:'',
					key:'',
					value:'',
				},
				showSex:false,
				showBirthday:false,
				qrcodeModal:false,
				sexList: [{
					index:1,
					name: this.$t('my_info.sex-man')
				},
				{
					index:2,
					name: this.$t('my_info.sex-woman')
				}],
				workActions: [{name: this.$t('my_info.occupation-working')},{name: this.$t('my_info.occupation-student')}],
				codeLoading:false,
				scrollTop:0,
				bindInviteCodeShow: false,
				inviteCode: '',
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(){
			await this.getUserInfo()
		},
		onReady(){
			// if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
		
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {			
			...mapActions(['getUserInfo']),
			
			// 
			showModal(title,key,tips = false){
				let data = {
					key:key,
					value:'',
					show:true,
					title:title,
					tips:tips ? tips : '',
				}
				this.userInfoModal = data
			},
			
			/**
			 * 提交内容
			 */
			async submitUserInfoModal(){
				this.$util.showLoading()
				let {
					key,
					value
				} = this.userInfoModal
				let params = {
					key:key,
					value:value
				}
				let res = await this.$api.user.updateUserInfo(params);
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function() {
						thos.getUserInfo()
						thos.userInfoModal.show = false
					},'success')
				}
				console.log(params)
			},
			
			// 更新头像
			async changeAvatar(){
				let res = await this.$util.chooseImage('file/updateAvatar')
				if(res !== null){
					let thos = this
					this.$util.showToast($t('my_info.toast-1'),function(){
						thos.getUserInfo()
					})
				}
			},
			
			// 更新收款码
			async changeQrcode(){
				let res = await this.$util.chooseImage('file/updateWithCode')
				if(res !== null){
					let thos = this
					this.$util.showToast($t('my_info.toast-2'),function(){
						thos.getUserInfo()
						thos.qrcodeModal = false
					})
				}
				
				// var _this = this;
				// let res =  await this.Common.selectImage(2,'file/updateWithCode');
				// if(res.length > 0){
				// 	_this.userInfo['user_money_qr_code'] = res[0];
				// 	uni.setStorageSync('_user',_this.userInfo);
				// }
			},
			
			// 更新性别
			async sexSelect(e) {
				this.$util.showLoading(this.$t('app.editing'))
				let params = {
					key:'sex',
					value:e.index
				}
				let res = await this.$api.user.updateUserInfo(params);
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
					},'success')
				}
			},
			
			// 更新职业
			async workSelect(e) {
				// alert('123');
				this.$util.showLoading(this.$t('app.editing'))
				let res = await this.$api.user.updateUserData({'work':e.name})
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
					})
				}
				
			},
			
			// 更新生日
			async birthdayConfirm(e) {
				this.$util.showLoading()
				let params = {
					key:'birthday',
					value:uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}
				let res = await this.$api.user.updateUserInfo(params);
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
						thos.showBirthday = false
					},'success')
				}
			},
			
			// 绑定微信
			async bindWechat(){
				
			},
			
			// 绑定邀请码
			async bindInviteCode(){
				this.$util.showLoading('提交中');
				let thos = this
				let res = await this.$api.user.bindInviteCode({invite_code: this.inviteCode});
				if(res.code == 200){
					this.$util.showToast(res.msg, ()=>{
						thos.bindInviteCodeShow1 = false
						thos.getUserInfo()
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.modal-upload{
		text-align: center;
		display:flex;
		justify-content: center;
		&_prview{
			width: 100px;
		}
		&_camera{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction:column;
			text-align: center;
			color: #888;
			background-color: #f4f5f7;
			font-size: $contentSize;
			width: 170rpx;
			height: 170rpx;
		}
	}
	/deep/ .u-popup{
		&__content{
			border-radius: 10px!important;
		}
		// .u-modal{
		// 	&__title{
		// 		padding:15px 0!important;
		// 		border-bottom: 1px solid #eee
		// 	}
		// 	&__content{
		// 		padding-top: 25px!important;
		// 	}
		// }
	}
	.m-header{
		background-color: #fff;
		margin: 15px 30rpx;
		border-radius: 10px;
		padding: 15px 10px;
		display: flex;
		align-items: center;
		flex-direction:column;
		position: relative;
		.avatar{
			position: relative;
			border-radius: 100%;
			overflow: hidden;
			z-index: 10;
		}
		.mask{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, .3);
		}
		.u-name{
			font-size: 28rpx;
			margin-top: 10px;
			position: relative;
		}
		.u-icon{
			position: absolute;
			top: 1px;
			right: -20px;
		}
		.u-upavatar{
			position: absolute;
			top: 10px;
			right: 10px;
			background-color: rgba(0,0,0,.1);
			color:#3f2a17;
			font-size: 25rpx;
			padding:3px 10px;
			border-radius: 25px;
		}
	}
	.m-cell-group{
		margin: 15px 30rpx
	}
	.m-avatar{
		position: relative;
	}
	.uni-list{
		margin: 15px 30rpx;
		border-radius: 6px;
	}
	.m-btn{
		margin: 10px 30rpx;
		.btn{
			padding: 10px;
			background-color: #eee;
			text-align: center;

		}

	}

</style>
